<template>
  <div class="search-index">
    <div class="search-content" v-for="(panel, panelIndex) in searchData" :key="panelIndex">
        <div class="search-name">{{panel.name}}</div>
        <ul class="search-group">
            <li :class="{'selected': panel.default.indexOf(options.value) != -1 }" v-for="(options, optionIndex) in panel.info" :key="optionIndex" @click="selectedValue(panel, options, panelIndex, optionIndex)">{{options.label}}</li>
         </ul>
    </div>
    <div class="search-btn">
        <div class="cancel" @click="cancel">取消</div>
        <div class="confirm" @click="confirm">确认</div>
    </div>
   </div>
</template>
<script>
export default {
    props: ['searchData'],
    data() {
        return {
            selectIndex: 0,
            valueArr: []
        }
    },
    methods: {
        confirm() {
            this.$emit('searchValue')
        },
        cancel() {
            this.$emit('closeSearch')
        },
        // index 为要修改的数组的索引值
        selectedValue(panel, options, panelIndex, optionIndex) {
            let obj = {
                index: panelIndex,
                value: options.value
            }
            this.$emit('changeDefault', obj)
        }
    }
}
</script>

<style lang="less" scoped>
.search-content{
    padding: .15rem 0rem;
    font-size: .3rem;
    color: #282828; 
    .search-name{
        padding: .15rem .3rem;
    }
    .search-group{ 
        margin: 0rem .15rem;
        font-size: 0rem;
        li{
            display: inline-block;
            margin: .15rem;
            font-size: .25rem;
            width: 1.74rem;
            height: .58rem;
            line-height: .58rem;
            text-align: center;
            border-radius: .05rem;
            border: 1px solid #707070;
        }
    }
    .selected{
        border: 1px solid #29abae!important;
        color: #fff;
        background: #29abae;
    }
}
.search-btn{
    font-size: .32rem;
    height: .8rem;
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0rem;
    line-height: .8rem;
    text-align: center;
    .cancel{
        // line-height: .8rem;
        // text-align: center;
        width: 3.3rem;
        color: #828282;
        border-top: 1px solid #cccccc;
    }
    .confirm{
        width: 3.3rem;
        color: #fff;
        background: #29abae;
        border-top: 1px solid #29abae;
    }
}
</style>

